<template>
	<div id="out2">
		<div id="top2">
			<a href="#/"><img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/></a>
			<span>商品详情</span>
			<img id="imgTop3" src="../assets/img/duanhuowang/gouwucheqian.png" alt=""/>
			<img id="imgTop2" src="../assets/img/duanhuowang/huizhuan.png" alt=""/>
			<img id="imgTop4" src="../assets/img/duanhuowang/shouyeqian.png" alt=""/>
		</div>
		<div id="show">
			<div id="con2">
				<div><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
				<div><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
				<div><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
				<div><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
				<div><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
				<div><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
			</div>
			<span>
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</span>
		</div>
		<div id="goPrice" style="background: red;">
			<span>抢购价：</span>
			<span class="price">￥129.08</span>
			<span>今天15:00限量开抢</span>
			<span class="toMe">提醒我</span>
		</div>
		<div class="name">
			<div>
				<div><img src="../assets/img/duanhuowang/yingguoqi.png" alt=""/></div>
				<p><span>英国直邮</span>焕彩璀璨花心唇彩4.8g焕彩璀璨花心唇彩4.8g焕彩璀璨花心唇彩4.8g</p>
			</div>
			<p class="price">￥ 169</p>
			<p>关税 ：￥10 <span>详情 > </span> </p>
			<p>邮费 ：￥50</p>
		</div>
		<div class="pointGo">
			<img class="pointGoo" src="../assets/img/duanhuowang/jifengou.png" alt=""/>
			<span>500000积分可抵500元，限购1件</span>
		</div>
		<div class="pointGo">
				<img id="gang" src="../assets/img/duanhuowang/xiegang.png" alt=""/>
				<span id="sevenDay">不支持7天无忧退换</span>
				<img id="fly" src="../assets/img/duanhuowang/feiji.png" alt=""/>
				<span class="t">海外直邮</span>
				<img id="zheng" src="../assets/img/duanhuowang/zheng.png" alt=""/>
				<span class="t">正品保证</span>
			<img id="right" src="../assets/img/fenlei/fenlei.png" alt=""/>
		</div>
		<div class="name">
			<div>
				<div><img src="../assets/img/duanhuowang/yingguoqi.png" alt=""/></div>
				<p><span class="t2">直邮 ，下单时需要提供真实姓名和身份证号以及收货地址请先去添加并填写这些信息</span></p>
			</div>
			<span>去添加</span>
		</div>
		<a href="#/AlafenHert">
		<div class="hertD">
			<div class="title">
			    <p><img class="shuGang" src="../assets/img/duanhuowang/hongshugang.png" alt=""/><span>阿拉粉心得</span>查看更多<img class="right" src="../assets/img/fenlei/more.png"/> </p>
		    </div>
		    <div class="hertDd"  v-for="Dd in 3">
		    	    <p>颜色涂抹上去看着很漂亮，棒棒哒！</p>
		    	    <div><img src="../assets/img/duanhuowang/huisetouxiang.png" alt=""/></div>
		    	    <span>霜霜</span>
		    </div>
		</div>
		</a>
		<a href="#/PinPaiM">
		<div class="pinPaiMingZi">
		    	<span>
		    		品牌标志
		    	</span>
		    	<div>
		    	    <p>
		    	    	    <span>品牌名字品牌名字</span>
		    	    	    英国最大彩妆品牌
		    	    	    <span class="guanZhu">+关注</span>
		    	    </p>
		    	    <p>查看 <span class="num">10</span> 件商品</p>
		    	</div>
		    	<p>品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍</p>
		    	<div class="shangPin" v-for="shangPin in 3">
		    	    	    <img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
		    	    	    <p>会呼吸丝滑蜜粉</p>
		    	    	    <p class="priceP">￥199</p>
		    	</div>
		</div>
		</a>
		<div class="maoShu">
			  <p class="tiT">
			  	<img src="../assets/img/duanhuowang/hongshugang.png" alt=""/>
			  	<span>商品描述</span>
			  </p>
			  <p>
			  	啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			  </p>
		</div>
		<div class="maoShu">
			  <p class="tiT">
			  	<img src="../assets/img/duanhuowang/hongshugang.png" alt=""/>
			  	<span>使用方法</span>
			  </p>
			  <p>
			  	啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			  </p>
		</div>
		<div class="maoShu">
			  <p class="tiT">
			  	<img src="../assets/img/duanhuowang/hongshugang.png" alt=""/>
			  	<span>商品图片</span>
			  </p>
			  <p style="border-bottom: none;">
			  	啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			  </p>
			  <div><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
			  <div><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
		</div>
		<div class="alaF">
			<p class="tiT">
			  	<img src="../assets/img/duanhuowang/hongshugang.png" alt=""/>
			  	<span>阿拉粉在买</span>
			 </p>
			 <div class="shangPin" v-for="shangPin in 3">
		    	    	    <img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
		    	    	    <p>会呼吸丝滑蜜粉</p>
		    	    	    <p class="priceP">￥199</p>
		    	</div>
		</div>
		<div class="alaF">
			<p class="tiT">
			  	<img src="../assets/img/duanhuowang/hongshugang.png" alt=""/>
			  	<span>服务承诺</span>
			 </p>
			 <div class="tuB">
			 	<div>
			 		<img src="../assets/img/duanhuowang/huizheng.png" alt=""/>
			 		<p>正品保证</p>
			 	</div>
			 	<div>
			 		<img src="../assets/img/duanhuowang/huiji.png" alt=""/>
			 		<p>海外直邮</p>
			 	</div>
			 	<div>
			 		<img src="../assets/img/duanhuowang/bu.png" alt=""/>
			 		<p>超时发货补贴</p>
			 	</div>
			 	<div>
			 		<img src="../assets/img/duanhuowang/PICC.png" alt=""/>
			 		<p>PICC承保</p>
			 	</div>
			 </div>
		</div>
		<div class="bottom">
			<span class="back"><img src="../assets/img/duanhuowang/xiaotieshi.png" alt=""/></span>
			<span class="back0"></span>
			<span class="left"></span>
			<span class="right"></span>
			<p>啊啊啊啊啊啊啊啊啊啊啊。</p>
			<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
			<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
			<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
		</div>
		<span><span><img src="../assets/img/duanhuowang/zaixiankefu.png" alt=""/>在线客服</span></span>
		<span class="right1">加入购物车</span>
		<div class="backFw">
			<div class="fuWuOut">
			<div class="tit"><span>服务说明</span> <img src="../assets/img/duanhuowang/xx.png" alt=""/> </div>
			<div class="fuWu">
				<p class="T"><img src="../assets/img/duanhuowang/xiegang.png" alt=""/>不支持7天无忧退货</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
			<div class="fuWu">
				<p class="T"><img src="../assets/img/duanhuowang/feiji.png" alt=""/>海外直邮</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
			<div class="fuWu">
				<p class="T"><img src="../assets/img/duanhuowang/zheng.png" alt=""/>不支持7天无忧退货</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		</div>
		<div class="backFw">
			<div class="fuWuOut">
			<div class="tit"><span>税费说明</span> <img src="../assets/img/duanhuowang/xx.png" alt=""/> </div>
			<div class="fuWu">
				<p class="T">商品进口税</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
			<div class="fuWu">
				<p class="T">进口税税率 12%</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
			<div class="fuWu">
				<p class="T">进口税计算</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
		</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		name:'CommodityDetails',
		methods: {
			
			round: function() {
				$(".alaF>.tuB>div>img").eq(3).css("width","8rem");
				$(".alaF>.tuB>div>p").eq(2).css("transform","translateX(-2rem)");
				var n=0;
				setInterval(function() {
					n++;
					if (n>=5) {
						n=0;
						$("#con2").css("left","0");
						$("#show>span>span").eq(0).addClass("active").siblings().removeClass("active")
					}
					$("#con2").animate({
						"left":-n*72+"rem"
					},1000);
					$("#show>span>span").eq(n).addClass("active").siblings().removeClass("active");
				}, 2000);
				$(".pointGo").eq(1).click(function(){
					$(".backFw").eq(0).fadeIn(500);
				});
				$(".fuWuOut>.tit>img").click(function(){
					$(this).parent().parent().parent().fadeOut(500);
				});
				$(".fuWu>p").eq(5).css("padding-bottom","5rem");
				$(".fuWu>p").eq(11).css("padding-bottom","5rem");
				$(".name>p").eq(1).find("span").click(function(){
					$(".backFw").eq(1).fadeIn(500);
				});
			}
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round();
		},
		
		
	}
</script>

<style>
	a{
		color: black;
		text-decoration: none;
	}
	#out2{
		background: rgb(242,242,242);
	}
	.backFw{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,.3);
		display: none;
	}
	.fuWuOut{
		position: absolute;
		width: 100vw;
		background: white;
		bottom: 0;
	}
	.fuWuOut>div{
		padding: 2rem;
		border-bottom: 0.1rem #cccccc solid;
	}
	.fuWuOut>.tit{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.fuWuOut>.tit>span{
		width: 155rem;
		font-size: 2.8rem;
		padding-left: 28rem;
		box-sizing: border-box;
	}
	.fuWuOut>.tit>img{
		width: 6.4rem;
		height: 2.4rem;
	}
	.fuWu>.T{
		font-size: 2.8rem;
		padding-bottom: 2rem;
		padding-left: 0;
	}
	.fuWu>.T>img{
		width: 3rem;
		height: 3rem;
		margin-right: 2rem;
	}
	.fuWu>p{
		font-size: 2.4rem;
		color: #808080;
		padding-left: 5rem;
	}
	#top2 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-around;
		position: fixed;
		z-index: 10;
		padding-left: 3rem;
		box-sizing: border-box;
	}
	
	#imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#top2>span {
		width: 37.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
		text-align: right;
		box-sizing: border-box;
		padding-right: 6.7rem;
	}
	
	#imgTop2 {
		width: 3.6rem;
		height: 3.5rem;
	}
	#imgTop3{
		width: 3.6rem;
	    height: 3.4rem;
	}
	#imgTop4{
		width: 3.6rem;
	    height: 3.6rem;
	}
	#show{
		width: 72rem;
		height: 40rem;
		position: relative;
		padding-top: 9.6rem;
		background: white;
	}
	#con2{
		width: 432rem;
		height: 40rem;
		position: absolute;
	}
	#con2>div>img{
		width: 12rem;
		height: 25.6rem;
		float: left;
		margin: 7.2rem 30rem;
	}
	#show>span{
		position: absolute;
		width: 18vw;
		top: 46.6rem;
		left: 50%;
		margin-left: -9vw;
	}
	#show>span>span{
		float: left;
		width: 0.8rem;
		height: 0.8rem;
		border-radius: 50%;
		background: #808080;
		margin-left: 1.4rem;
	}
	#show>span>.active{
		background: #e53e42;
	}
	#goPrice{
		width: 72rem;
		height: 10rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 2rem;
		box-sizing: border-box;
		background: white;
	}
	#goPrice>span{
		height: 3.1rem;
		font-family: MicrosoftYaHei;
		font-size: 2.4rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.1rem;
		letter-spacing: 0px;
		color: #ffffff;
	}
	#goPrice>.price{
		width: 25rem;
	}
	#goPrice>.toMe{
		width: 12rem;
		height: 4rem;
		background-color: #ffffff;
		border-radius: 2rem;
		color: #e53e42;
		line-height: 4rem;
		text-align: center;
		margin-left: 1rem;
	}
	.name{
		width: 100vw;
		border: 0.1rem #cccccc solid;
		padding-bottom: 2rem;
		background: white;
	}
	.name>div{
		padding: 2rem;
		box-sizing: border-box;
		height: 9.4rem;
	}
	.name>div>div{
		width: 4rem;
		height: 3rem;
		border: solid 0.1rem #cccccc;
		float: left;
		padding: 0.8rem 1rem;
		box-sizing: border-box;
	}
	.name>div>div>img{
		width: 2rem;
		height: 1.4rem;
	}
	.name>div>p{
		float: right;
		width: 59rem;
		height: 6.9rem;
		font-family: MicrosoftYaHei;
		font-size: 3rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
		color: #333333;
		margin-right: 2.6rem;
	}
	.name>div>p>span{
		width: 11.9rem;
		height: 3rem;
		font-family: MicrosoftYaHei;
		font-size: 3rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3rem;
		letter-spacing: 0px;
		color: #e53e42;
		margin-right: 2.3rem;
	}
	.name>.price{
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.1rem;
		letter-spacing: 0px;
		color: #e53e42;
		margin-top: 2.4rem;
		margin-bottom: 1.6rem;
		padding-left: 2.8rem;
	}
	.name>p{
		font-family: MicrosoftYaHei;
		font-size: 2.4rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.1rem;
		letter-spacing: 0px;
		color: #4d4d4d;
		padding-bottom: 1.1rem;
		padding-left: 2.1rem;
	}
	.name>p>span{
		margin-left: 1rem;
		width: 6rem;
		height: 2.4rem;
		line-height: 2.4rem;
		background-color: #ffffff;
		border-radius: 0.2rem;
		border: solid 0.1rem #e53e42;
		color: #e53e42;
		padding: 0.2rem 0.5rem;
		font-size: 1.7rem;
	}
	.name>div>p>.t2{
		font-size: 2.4rem;
	}
	.name>span{
		float: right;
		margin-right: 2rem;
		transform: translateY(-3rem);
		width: 8rem;
		height: 3rem;
		color: red;
		font-size: 1.8rem;
		text-align: center;
		line-height: 3rem;
		border: 0.1rem solid red;
	}
	.pointGo{
		width: 100vw;
		height: 6rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border: 0.1rem #cccccc solid;
		padding: 2rem 2rem;
		box-sizing: border-box;
		background: white;
	}
	.pointGo>.pointGoo{
		width: 7rem;
		height: 2.3rem;
	}
	.pointGo>span{
		width: 60rem;
		font-family: MicrosoftYaHei;
		font-size: 2.4rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3rem;
		letter-spacing: 0px;
		color: #4d4d4d;
		padding-left: 3rem;
	}
	.pointGo>#gang{
		width: 8rem;
		height: 3rem;
	}
	.pointGo>#sevenDay{
		padding: 0.5rem 0;
		font-family: MicrosoftYaHei;
		font-size: 2rem;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		color: #e53e42;
		padding-left: 0.7rem;
		width: 100rem;
	}
	.pointGo>.t{
		padding-left: 0.7rem;
	}
	.pointGo>#fly{
		width: 8.4rem;
		height: 3.3rem;
	}
	.pointGo>#zheng{
		width: 8rem;
		height: 3rem;
	}
	.pointGo>#right{
		width: 4.4rem;
		height: 2.5rem;
	}
	.hertD{
		background: white;
		margin-top: 2rem;
		width: 100vw;
		height: 30rem;
		padding-bottom: 1rem;
	}
	.title{
		padding: 2rem;
		font-size: 2rem;
		border-bottom: 0.1rem solid #cccccc;
	}
	.title>p{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.title>p>.shuGang{
		width: 0.6rem;
	    height: 3rem;
	}
	.title>p>span{
		width: 55rem;
		font-size: 3rem;
	}
	.title>p>.right{
		width: 1.7rem;
		height: 3rem;
	}
	.hertDd{
		width: 22rem;
		height: 20rem;
		border-radius: 1rem;
		border: solid 0.1rem #cccccc;
		float: left;
		margin-left: 2rem;
		margin-top: 2rem;
		box-sizing: border-box;
		padding: 1rem;
		position: relative;
	}
	.hertDd>p{
		font-family: MicrosoftYaHei;
		font-size: 2.4rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3rem;
		letter-spacing: 0px;
		color: #4d4d4d;
	}
	.hertDd>div{
		display: inline-block;
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		border: 0.1rem solid #cccccc;
		text-align: center;
		padding-top: 0.6rem;
		box-sizing: border-box;
		position: absolute;
		bottom: 2rem;
	}
	.hertDd>span{
		position: absolute;
		font-size: 1.8rem;
		left: 6rem;
		bottom: 3rem;
	}
	.hertDd>div>img{
		width: 2rem;
		height: 2.4rem;
	}
	.pinPaiMingZi{
		padding: 1.7rem;
		overflow: hidden;
		background: white;
		margin-top: 2rem;
		width: 100vw;
		box-sizing: border-box;
		margin-bottom: 2rem;
	}
	.pinPaiMingZi>p{
		font-size: 1.8rem;
		padding-top: 3rem;
		float: left;
		padding-bottom: 2rem;
	}
	.pinPaiMingZi>span{
		float: left;
		width: 6rem;
		height: 6rem;
		border: 0.1rem solid #cccccc;
		font-size: 1.2rem;
		padding: 1.7rem;
		box-sizing: border-box;
	}
	.pinPaiMingZi>div{
		float: right;
		width: 61rem;
		padding-left: 1rem;
	}
	.pinPaiMingZi>div>p{
		font-size: 2rem;
	}
	.pinPaiMingZi>div>p>span{
		font-family: MicrosoftYaHei;
		font-size: 2.8rem;
		line-height: 3rem;
		color: #333333;
	}
	.pinPaiMingZi>div>p>.guanZhu{
		float: right;
		text-align: center;
		padding: 0.3rem;
		width: 10rem;
		height: 3rem;
		border-radius: 1.4rem;
		border: solid 0.1rem #e53e42;
		color: #e53e42;
	}
	.pinPaiMingZi>div>p>.num{
		color: red;
	}
	.pinPaiMingZi>.shangPin{
		border-top: 0.1rem solid #cccccc;
		padding: 3rem 0;
		width: 21.5rem;
		text-align: center;
		float: left;
	}
	.pinPaiMingZi>.shangPin>img{
		width: 12rem;
		height: 14rem;
	}
	.pinPaiMingZi>.shangPin>p{
		font-size: 2.4rem;
	}
	.pinPaiMingZi>.shangPin>.priceP{
		color: red;
	}
	.maoShu{
		background: white;
		padding: 0 2rem;
	}
	.maoShu>.tiT{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 1rem 0;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	.maoShu>.tiT>img{
		width: 0.6rem;
		height: 3rem;
	}
	.maoShu>.tiT>span{
		font-size: 3rem;
		width: 65rem;
	}
	.maoShu>p{
		padding: 1rem 0;
		border-bottom: 0.1rem solid #CCCCCC;
		font-size: 1.2rem;
		color: #4d4d4d;
		font-family: MicrosoftYaHei;
	}
	.maoShu>div{
		text-align: center;
		margin-bottom: 4rem;
	}
	.maoShu>div>img{
		width: 11.5rem;
		height: 25.6rem;
	}
	.alaF{
		background: white;
		overflow: hidden;
	}
	.alaF>.tiT{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 1rem 0;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	.alaF>.tiT>img{
		width: 0.6rem;
		height: 3rem;
	}
	.alaF>.tiT>span{
		font-size: 3rem;
		width: 68rem;
	}
	.alaF>.shangPin{
		border-top: 0.1rem solid #cccccc;
		padding: 3rem 0;
		width: 24rem;
		text-align: center;
		float: left;
	}
	.alaF>.shangPin>img{
		width: 12rem;
		height: 14rem;
	}
	.alaF>.shangPin>p{
		font-size: 2.4rem;
	}
	.alaF>.shangPin>.priceP{
		color: red;
	}
	.alaF>.tuB{
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 3rem 6rem;
		box-sizing: border-box;
	}
	.alaF>.tuB>div>img{
		width: 6rem;
		height: 6rem;
	}
	.alaF>.tuB>div>p{
		font-size: 1.8rem;
	}
	.bottom{
		position: relative;
		padding: 0 2rem;
		padding-top: 8.2rem;
		padding-bottom: 16rem;
	}
	.bottom>.back{
		position: absolute;
		text-align: center;
		left: 50%;
		top: 1rem;
		margin-left: -13rem;
		width: 26rem;
		height: 5rem;
		background-color: #808080;
		border-radius: 0.2rem;
		box-sizing: border-box;
		padding-top: 0.5rem;
	}
	.bottom>.back>img{
		width: 12rem;
	}
	.bottom>.back0{
		position: absolute;
		left: 50%;
		top: 0.5rem;
		margin-left: -12.5rem;
		width: 26rem;
		height: 5rem;
		border-radius: 0.2rem;
		box-sizing: border-box;
		border: solid 0.1rem #808080;
	}
	.bottom>.left{
		position: absolute;
		top: 3.5rem;
		left: 15rem;
		width: 180px;
		height: 2px;
		background-color: #cccccc;
	}
	.bottom>.right{
		position: absolute;
		top: 3.5rem;
		right: 15rem;
		width: 180px;
		height: 2px;
		background-color: #cccccc;
	}
	.bottom>p{
		font-size: 2.4rem;
		line-height: 3.6rem;
		margin-bottom: 2rem;
	}
	#out2>span{
		position: fixed;
		bottom: 0;
		width: 36rem;
		height: 9.6rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 10;
		background: white;
		font-size: 2.8rem;
	}
	#out2>span>span{
		width: 20rem;
	}
	#out2>span>span>img{
		width: 3.7rem;
		height: 3rem;
		margin-right: 1rem;
	}
	#out2>.right1{
		background: #e53e42;
		right: 0;
		color: white;
	}
</style>